<script>
import { JVXETypes } from '@comp/jeecg/JVxeTable'
import $file from '@/libs/globalFunction/file'
import { FilePreview } from '@/utils/tslCommon'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin'
import { getAction, postAction , getFileAccessHttpUrl} from '@api/manage'

export default {
  name: 'OutboundRecordPickingAuditForm',
  mixins: [JVxeTableModelMixin],
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 },
      },
      confirmLoading: false,
      model: {},
      url: {
        edit: '/wms/outbound/outbound-record/audit',
        reject: '/wms/outbound/outbound-record/reject/',
        outboundRecordItem: {
          list: '/wms/outbound/outbound-record/queryOutboundRecordItemByMainId',
        },
        cargoGroupMember: {
          list: '/wms/outbound/outbound-record/queryOutboundRecordCargoMemberByMainId',
        },
        outboundRecordFile: {
          list: '/wms/outbound/outbound-record/queryOutboundRecordFileByMainId',
        },
        outboundVehicleInspectionInfo: {
          list: '/wms/outbound/outbound-record/queryOutboundVehicleInspectionInfoByMainId',
        },
        outboundVehicleInspectionRecord: {
          list: '/wms/outbound/outbound-record/queryOutboundVehicleInspectionRecordByMainId',
        },
      },
      outboundRecordItemTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '物料编码',
            key: 'materialCode',
            type: JVXETypes.normal,
            width: '110px',
          },
          {
            title: '物料名称',
            key: 'materialName',
            type: JVXETypes.normal,
            minWidth: '180px',
          },
          {
            title: '单位',
            key: 'unit_dictText',
            type: JVXETypes.normal,
            dictCode: 'ji_unit',
            width: '60px',
          },
          {
            title: '库存数量',
            key: 'quantity',
            type: JVXETypes.normal,
            width: '80px',
          },
          {
            title: '辅单位',
            key: 'secondaryUnit_dictText',
            type: JVXETypes.normal,
            dictCode: 'zl_unit',
            width: '70px',
          },
          {
            title: '辅数量',
            key: 'secondaryQuantity',
            type: JVXETypes.normal,
            width: '80px',
          },
          {
            title: '生产日期',
            key: 'productionDate',
            type: JVXETypes.normal,
            width: '100px',
          },
          {
            title: '限用日期',
            key: 'expirationDate',
            type: JVXETypes.normal,
            width: '100px',
          },
          {
            title: '批次号',
            key: 'batchNumber',
            type: JVXETypes.normal,
            width: '100px',
          },
          {
            title: '物料批号',
            key: 'materialBatchNumber',
            type: JVXETypes.normal,
            width: '150px',
          },
          {
            title: '储位',
            key: 'storageLocation_dictText',
            type: JVXETypes.normal,
            width: '130px',
          },
          {
            title: '质检状态',
            key: 'qualityInspectionStatus_dictText',
            type: JVXETypes.normal,
            width: '80px',
          },
          {
            title: '通知出库数量',
            key: 'notifyOutboundQuantity',
            type: JVXETypes.normal,
            width: '120px',
          },
          {
            title: '拣料数量',
            key: 'pickingQuantity',
            type: JVXETypes.normal,
            width: '150px',
          },
          {
            title: '审核数量',
            key: 'auditQuantity',
            type: JVXETypes.input,
            width: '150px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
        ],
      },
      outboundRecordFileTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '附件名称',
            key: 'fileName',
            type: JVXETypes.normal,
            width: '220px',
            defaultValue: '',
          },
          {
            title: '文件大小',
            key: 'fileSizeFormat',
            type: JVXETypes.normal,
            width: '200px',
          },
          {
            title: '创建人',
            key: 'createBy_dictText',
            type: JVXETypes.normal,
            width: '200px',
          },
          {
            title: '创建时间',
            key: 'createTime',
            type: JVXETypes.normal,
            width: '200px',
          },
          {
            title: '操作',
            key: 'action',
            type: JVXETypes.slot,
            fixed: 'right',
            minWidth: '100px',
            align: 'center',
            slotName: 'action',
          },
        ],
      },
      cargoGroupMemberTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '姓名',
            key: 'memberName',
            type: JVXETypes.normal,
            width: '110px',
          },
          {
            title: '作业工种',
            key: 'jobType_dictText',
            type: JVXETypes.normal,
            minWidth: '180px',
          },
          {
            title: '作业吨数',
            key: 'jobWeight',
            type: JVXETypes.normal,
          },
        ],
      },
      outboundVehicleInspectionRecordTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '项目',
            key: 'itemName',
            type: JVXETypes.normal,
            width: '150px',
          },
          {
            title: '位置',
            key: 'position',
            type: JVXETypes.normal,
            align: 'center',
            width: '130px',
          },
          {
            title: '合格标准',
            key: 'standard',
            type: JVXETypes.normal,
            width: '280px',
          },
          {
            title: '检查方法',
            key: 'inspectionMethod',
            type: JVXETypes.normal,
            width: '280px',
          },
          {
            title: '问题描述',
            key: 'problemDesc',
            type: JVXETypes.normal,
          },
          {
            title: '处理意见',
            key: 'handlingOpinion',
            type: JVXETypes.normal,
          },
        ],
      },
      outboundVehicleInspectionInfo: {
        vehicleNumber: null,
        transporter: null,
        pickUpDate: null,
      },
    }
  },
  methods: {
    audit(record) {
      if (!record) {
        return
      }
      this.model = Object.assign({}, record)
      this.fetchItemData()
    },
    fetchItemData() {
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.outboundRecordItem.list, params, this.outboundRecordItemTable, (res) => {
          if (this.outboundRecordItemTable.dataSource && this.outboundRecordItemTable.dataSource.length > 0) {
            this.outboundRecordItemTable.dataSource.forEach((item) => {
              item.auditQuantity = item.auditQuantity || item.pickingQuantity
            })
            this.model.pickerRemark = this.outboundRecordItemTable.dataSource[0].pickerRemark
          }
        })
        this.requestSubTableData(this.url.outboundRecordFile.list, params, this.outboundRecordFileTable, (res) => {
          if (this.outboundRecordFileTable.dataSource && this.outboundRecordFileTable.dataSource.length > 0) {
            this.outboundRecordFileTable.dataSource.forEach((item) => {
              this.$set(item, 'fileSizeFormat', $file.calculateFileSize(item.fileSize))
            })
          }
        })
        this.requestSubTableData(this.url.cargoGroupMember.list, params, this.cargoGroupMemberTable)
        this.fetchVehicleInspectionInfoData(params)
        this.requestSubTableData(
          this.url.outboundVehicleInspectionRecord.list,
          params,
          this.outboundVehicleInspectionRecordTable
        )
      }
    },
    fetchVehicleInspectionInfoData(params) {
      getAction(this.url.outboundVehicleInspectionInfo.list, params).then((res) => {
        let { result } = res
        if (result && result.length) {
          this.outboundVehicleInspectionInfo = result[0]
        }
      })
    },
    handlePreviewFile({ row }) {
      FilePreview(row.filePath)
    },
    handleDownloadFile({ row }) {
      return row.filePath
    },
    async handleSubmit() {
      const errMap = await this.$refs.outboundRecordItem.validateTable()
      if (errMap) {
        return
      }
      const formData = {
        id: this.model.id,
        outboundRecordItemList: this.outboundRecordItemTable.dataSource
          .filter((item) => item.auditQuantity)
          .map((item) => {
            return {
              id: item.id,
              auditQuantity: item.auditQuantity,
            }
          }),
      }
      this.request(formData)
    },
    auditReject() {
      postAction(`${this.url.reject}/${this.model.id}`, {}).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    rowspanMethod({ row, column, rowIndex, columnIndex }) {
      const visibleData = this.outboundVehicleInspectionRecordTable.dataSource
      const cellValue = row[column.property]
      if (column.property === 'itemName' && cellValue) {
        const prevRow = visibleData[rowIndex - 1]
        let nextRow = visibleData[rowIndex + 1]
        if (prevRow && prevRow.itemName === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow.itemName === cellValue) {
            nextRow = visibleData[++countRowspan + rowIndex]
          }
          return { rowspan: countRowspan, colspan: 1 }
        }
      }
      if (column.property === 'position' && cellValue) {
        const prevRow = visibleData[rowIndex - 1]
        let nextRow = visibleData[rowIndex + 1]
        if (prevRow && prevRow.itemName === row.itemName && prevRow.position === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow.itemName === row.itemName && nextRow.position === cellValue) {
            nextRow = visibleData[++countRowspan + rowIndex]
          }
          return { rowspan: countRowspan, colspan: 1 }
        }
      }
    },
  },
}
</script>

<template>
  <a-spin :spinning="confirmLoading">
    <div class="ant-descriptions-title">出库明细</div>
    <j-vxe-table
      keep-source
      ref="outboundRecordItem"
      :loading="outboundRecordItemTable.loading"
      :columns="outboundRecordItemTable.columns"
      :dataSource="outboundRecordItemTable.dataSource"
      :maxHeight="300"
      :rowNumber="true"
      :rowSelection="false"
      :toolbar="false"
    />
    <a-input style="margin: 10px 0" disabled v-model="model.pickerRemark" placeholder="请输入备注" />
    <j-vxe-table
      keep-source
      ref="outboundRecordFile"
      :loading="outboundRecordFileTable.loading"
      :columns="outboundRecordFileTable.columns"
      :dataSource="outboundRecordFileTable.dataSource"
      :maxHeight="300"
      :rowNumber="true"
      :toolbar="false"
    >
      <template v-slot:action="props">
        <a @click="handlePreviewFile(props)">预览</a>
        <a-divider type="vertical" />
        <a target="_blank" rel="noopener noreferrer" :href="handleDownloadFile(props)">下载</a>
      </template>
    </j-vxe-table>
    <div style="margin-bottom: 10px"></div>
    <div class="ant-descriptions-title">作业信息</div>
    <j-vxe-table
      keep-source
      ref="cargoGroupMember"
      :loading="cargoGroupMemberTable.loading"
      :columns="cargoGroupMemberTable.columns"
      :dataSource="cargoGroupMemberTable.dataSource"
      :maxHeight="300"
      :rowNumber="true"
      :rowSelection="false"
      :toolbar="false"
    />
    <div style="margin-top: 10px" class="ant-descriptions-title">车辆检查项目</div>
    <j-form-container disabled>
      <a-form-model ref="form" :model="outboundVehicleInspectionInfo" slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vehicleNumber">
              <a-input v-model="outboundVehicleInspectionInfo.vehicleNumber" placeholder="请输入车牌号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="运输商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="transporter">
              <a-input v-model="outboundVehicleInspectionInfo.transporter" placeholder="请输入运输商"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="提货日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pickUpDate">
              <j-date
                style="width: 100%"
                :show-time="true"
                date-format="YYYY-MM-DD"
                placeholder="请输入提货日期"
                class="query-group-cust"
                v-model="outboundVehicleInspectionInfo.pickUpDate"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <j-vxe-table
      keep-source
      ref="outboundVehicleInspectionRecord"
      :loading="outboundVehicleInspectionRecordTable.loading"
      :columns="outboundVehicleInspectionRecordTable.columns"
      :dataSource="outboundVehicleInspectionRecordTable.dataSource"
      :maxHeight="500"
      :rowNumber="false"
      :rowSelection="false"
      :toolbar="false"
      :span-method="rowspanMethod"
    />
  </a-spin>
</template>

<style scoped></style>
